<template>
  <div class="courses">
    <v-overlay :value="overlay"></v-overlay>
    <v-container style="margin: 0 auto; width: 90%; max-height: 100vh">
      <v-row>
        <v-col
          v-for="(item, i) in evaList"
          :key="i"
          cols="auto"
          style="width: 25%"
        >
          <v-card
            height="200"
            width="100%"
            elevation="10"
            @click="toEvaluate(item)"
            :class="[item.evaluated ? 'evaluated' : 'uneva']"
          >
            <v-card-title
              class="tit"
              v-text="locale == 'en' ? item.alias : item.title"
            ></v-card-title>
            <v-card-subtitle
              v-text="locale == 'en' ? item.title : item.alias"
            ></v-card-subtitle>
            <img v-if="item.evaluated" class="Img" src="../../assets/right.png">
            <!-- <v-icon class="icon" large v-if="item.evaluated"
              >mdi-check-circle</v-icon
            > -->
          </v-card>
        </v-col>
      </v-row>
      <v-alert
        v-model="alert_submitted"
        border="left"
        close-text="Close Alert"
        color="deep-purple accent-4"
        dark
        dismissible
      >
        请勿重复提交
      </v-alert>
    </v-container>
    <v-snackbar v-model="alert_evaluated" centered>请勿重复评价</v-snackbar>
  </div>
</template>
<script>
import vueI18n from "../../plugins/vue-i18n";
import { instance } from "../../api/request";
import { getToken } from "../../utils/getToken";
export default {
  data() {
    return {
      isLoading: true,
      active: 0,
      evaList: [],
      studentId: null,
      alert_submitted: false,
      evaluated: "evaluated",
      unevaluated: "unevaluated",
      alert_evaluated: false,
      overlay: false
    };
  },
  mounted: function () {
    this.overlay = true
    const studentInfo = JSON.parse(localStorage.getItem("userinfo"));
    //获取学生信息
    if (studentInfo) {
      this.studentId = studentInfo.studentId;
      this.$store.commit("getStudentInfo", studentInfo);
    }
    //获取评测信息
    instance({
      url: "/evaluation/current",
      method: "get",
      headers: {
        //请求头设置为表单提交的请求头
        "Content-Type": "application/json",
        token: getToken(),
      },
    }).then((res) => {
      if (res.data.status == 400) {
        this.$toast({
          message: "身份过期，请重新登录",
          position: "top",
        });
        this.$router.push("/login");
      } else if (res.data.status == 200) {
        const evaluation = res.data.data.evaluation;
        //当获取到评测信息时再调用获取评价列表接口
        if (evaluation !== null) {
          this.$store.commit("getEvaluation", evaluation);
          //获取评价列表
          instance({
            url: "/source/list/evaluation/personal",
            method: "get",
            headers: {
              //请求头设置为表单提交的请求头
              "Content-Type": "application/json",
              token: getToken(),
            },
            params: {
              evaluationId: evaluation.id,
              studentId: parseInt(this.studentId),
            },
          }).then((res) => {
            if (res.data.status == 400) {
              
              this.$router.push("/login");
            } else if (res.data.status == 200) {
              let subList = res.data.data;
              //对获取到的数组元素进行字符长度上的截取
              const subList_after = subList.map((item) => {
                let obj = {};
                //对象解构
                let { classHours, credit, evaluated, id, teacher } = item;
                obj = { classHours, credit, evaluated, id, teacher };
                //截取英文字符串
                if (item.alias.length <= 35) {
                  obj.alias = item.alias;
                } else {
                  obj.alias = item.alias.slice(0, 35) + "...";
                }
                //截取中文字符串
                if (item.title.length <= 14) {
                  obj.title = item.title;
                } else {
                  obj.title = item.title.slice(0, 14) + "...";
                }
                return obj;
              });
              subList_after.forEach((item) => {
                this.evaList.push(item);
              });
            }
          });
        } else {
          this.$toast({
            message: "当前尚无评测",
            position: "top",
          });
        }
      }
      this.$nextTick(() => {
        setTimeout(() => {
          this.overlay = false;
        }, 800);
      });
    });
  },
  methods: {
    toEvaluate(item) {
      if (item.evaluated) {
        this.alert_evaluated = true;
        setTimeout(() => {
          this.alert_evaluated = false;
        }, 1000);
      } else {
        //通过路由的query传值会把数据绑定在路由上面，这样刷新页面数据也不会丢失
        //但是要注意数据要先转换为JSON格式才能传递，使用时也要转化为对象形式
        this.$store.commit("getSource", item);
        this.$router.push({
          path: "/main/evaluate",
          query: {
            teacherInfo: JSON.stringify(item.teacher),
            engclass: item.alias,
            chineseclass: item.title,
          },
        });
      }
    },
    alreadyEvaluate() {
      this.alert_submitted = true;
      setTimeout(() => {
        this.alert_submitted = false;
      }, 1000);
    },
  },
  computed: {
    locale() {
      return vueI18n.locale;
    },
  },
};
</script>
<style scoped>
.courses {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: auto;
  padding-top: 3vh;
}
.tit {
  font-size: 20px;
  padding-top: 5vh;
}
.v-chip.v-size--default {
  border-radius: 0px 3px 3px 0px;
  font-size: 16px;
  height: 32px;
}
/* .icon {
  color: green;
  position: absolute;
  left: 80%;
  bottom: 10%;
} */
.Img{
  height: 50px;
  position: absolute;
  left: 75%;
  bottom: 10%;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>
